import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { InfiniteScroll, NavBar, Space, Toast } from 'antd-mobile'
import { useSelector } from 'react-redux'
import axios from 'axios'
import { useEffect } from 'react'
function Home() {
    const navigate = useNavigate()

    const counterSlice = useSelector((state) => state.counterSlice)

    const [data, setData] = useState([])
    const [hasMore, setHasMore] = useState(true)

    const getData = async () => {
        const res = await axios.post('/api/trip/train', {
            "start": counterSlice.start,
            "end": counterSlice.end,
            "date": "string",
            "isSpeed": true,
            "isSeat": true,
            "isDesc": true,
            "page": 1
        })
        console.log(res);


        const { code, data } = res.data
        if (code == 200) {
            setData(data)
            setHasMore(res.length > 0)
        }
    }
    useEffect(() => {
        getData()

    }, [])

    return (
        <div>
            <NavBar back={
                <div>
                    {counterSlice.start}-{counterSlice.end}
                </div>
            } onBack={navigate(-1)}  >

            </NavBar>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>前一天</span>  <span>{counterSlice.date}</span> <span>后一天</span>
            </div>


            <div>
                {
                    data.map((item, index) => {
                        return (

                            <div onClick={() => {
                                navigate(`/detail?id=${item.id}`)
                            }} key={index} style={{ margin: "20px" }}>

                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <div>
                                        <p>21:02</p>
                                        <p>{item.start}</p>
                                    </div>
                                    <div>
                                        <p>D2214</p>
                                        <hr />
                                        <p>{item.startTime}</p>
                                    </div>
                                    <div>
                                        <p>21:02</p>
                                        <p>{item.start}</p>
                                    </div>
                                    <div style={{ textAlign: 'center', margin: 'auto 0' }}>
                                        <b>￥{item.tick?.secondTick}</b>起
                                    </div>


                                </div>

                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <div>
                                        <span>二等座</span>
                                        <span> 有票</span>
                                    </div>
                                    <div>
                                        <span>二等座</span>
                                        <span> 有票</span>
                                    </div>
                                    <div>
                                        <span>特等座</span>
                                        <span> 18票</span>
                                    </div>
                                </div>


                            </div>



                        )
                    })
                }
            </div>
            <div >


                <p style={{ textAlign: 'center' }}>
                    <span >  车次已售完,可抢票</span>

                </p>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>

                    <div>
                        <p>21:02</p>
                        <p>北京</p>
                    </div>
                    <div>
                        <p>D2214</p>
                        <hr />
                        <p>01:11:56</p>
                    </div>
                    <div>
                        <p>21:02</p>
                        <p>广州</p>
                    </div>
                    <div style={{ textAlign: 'center', margin: 'auto 0' }}>
                        <b>抢</b>
                    </div>
                </div>



            </div>

            <p><b>以下为普通列车</b></p>
            <div>
                {
                    data.map((item, index) => {
                        return (

                            <div key={index} >

                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <div>
                                        <p>21:02</p>
                                        <p>{item.start}</p>
                                    </div>
                                    <div>
                                        <p>D2214</p>
                                        <hr />
                                        <p>{item.startTime}</p>
                                    </div>
                                    <div>
                                        <p>21:02</p>
                                        <p>{item.start}</p>
                                    </div>
                                    <div style={{ textAlign: 'center', margin: 'auto 0' }}>
                                        <b>￥{item.tick?.secondTick}</b>起
                                    </div>


                                </div>

                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <div>
                                        <span>二等座</span>
                                        <span> 有票</span>
                                    </div>
                                    <div>
                                        <span>二等座</span>
                                        <span> 有票</span>
                                    </div>
                                    <div>
                                        <span>特等座</span>
                                        <span> 18票</span>
                                    </div>
                                </div>


                            </div>



                        )
                    })
                }

                <InfiniteScroll loadMore={data} hasMore={hasMore} />
            </div>


            <div style={{ position: 'fixed', bottom: '0', height: "40px", background: '#fff' }}>
                <div style={{ margin: 'auto 0', display: 'flex', justifyContent: 'space-between' }}>
                    <b style={{ height: '20px' }}>筛选</b>
                    <b style={{ height: '20px', marginLeft: '110px' }}>出发时间</b>
                    <b style={{ height: '20px', marginLeft: '110px' }}>旅行耗时</b>
                </div>

            </div>

        </div>
    )
}

export default Home